<template>
	<view class="menu">
		<view class="menu_warpper" v-for="item in list" :key="item.id">
			<view class="menu_warpper_item">
				<image :src="item.imageUrl" class="menu_warpper_item_img"></image>
				<view class="menu_warpper_item_text">{{item.imageName}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from "vue";
	const props = defineProps({
		list: Array,
	});
</script>

<style lang="scss">
	.menu {
		height: 100upx;
		padding: 12upx 0 20upx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		border-radius: 10upx;
		&_warpper {
			width: 20vw;
			&_item {
				text-align: center;
				&_img {
					width: 64upx;
					height: 64upx;
				}
				&_text{
					margin-top: -8upx;
					font-size: 24upx;
				}
			}

		}
	}
</style>
